<template>
<v-container grid-list-md text-xs-center>
    <h1 class="display-3">Register</h1>
    <v-flex xs6 offset-xs3 justify-center>
        
    <form>
         <v-text-field
      v-validate="'required|max:10'"
      v-model="username"
      :counter="10"
      :error-messages="errors.collect('name')"
      prepend-icon="person"
      label="用户名，用作登录账号"
      data-vv-name="username"
      required
    ></v-text-field>

<v-text-field id="password"
      v-validate="'required|min:5'"
      v-model="password"
      :counter="10"
      :error-messages="errors.collect('password')"
      data-vv-name="password"                 
       prepend-icon="lock" 
       name="password" 
       label="密码" 
       type="password"></v-text-field>
                <v-text-field
      v-validate="'required|max:10'"
      v-model="nickname"
      :counter="10"
      :error-messages="errors.collect('name')"
      label="昵称"
      prepend-icon="contacts"
      data-vv-name="nickname"
      required
    ></v-text-field>

<v-flex xs12 sm8 md4>
      <v-dialog
        ref="dialog"
        v-model="modal"
        :return-value.sync="birthday"
        persistent
        lazy
        full-width
        width="290px"
      >
        <v-text-field
          slot="activator"
          v-model="birthday"
          label="选择生日日期"
          prepend-icon="event"
          readonly
        ></v-text-field>
        <v-date-picker v-model="birthday" scrollable>
          <v-spacer></v-spacer>
          <v-btn flat color="primary" @click="modal = false">Cancel</v-btn>
          <v-btn flat color="primary" @click="$refs.dialog.save(birthday)">OK</v-btn>
        </v-date-picker>
      </v-dialog>
</v-flex>

    </form>
                  <v-card-actions>
                <v-spacer></v-spacer>
                
                <v-btn color="blue" @click="register">Register</v-btn>
                <v-btn color="blue">Clear</v-btn>
                <v-btn color="blue" @click="toLogin()">Back To Login</v-btn>
              </v-card-actions>
    </v-flex>
    
    </v-container>
</template>
<script>
import Vue from "vue";
import VeeValidate from "vee-validate";

Vue.use(VeeValidate);
export default {
    $_veeValidate: {
    validator: "new"
  },
  data: () => ({
    username: "",
    nickname: "",
    password: "",
    birthday: "",
    items:[
        '男','女','保密'
        ],
    modal: false,
    dictionary: {
      attributes: {
        username: "用户名",
        password: "密码"
        // custom attributes
      },
      custom: {
        username: {
          required: () => "Name can not be empty",
          max: "The name field may not be greater than 10 characters"
          // custom messages
        },
        nickname: {
          required: () => "Name can not be empty",
          max: "The name field may not be greater than 10 characters"
          // custom messages
        },
        password: {
          required: () => "Password can not be empty",
          min: "at least 5 words"
        }
      }
    }
  }),
  methods:{
    submit() {
      this.$validator.validateAll();
    },
    register(){
        let formData =new FormData();
        formData.append("username",this.username);
        formData.append("nickname",this.nickname);
        formData.append("password",this.password);
        formData.append("birthday",this.birthday);
        alert(this.birthday);

        this.$http
        .post("/user/register",formData).then(response=>{
            alert(response.data);
            this.clear();
        });
    },
    toLogin(){
       this.$router.push("/");
    }
    ,
    clear() {
      this.username = "";
      this.password = "";
      this.nickname="";
    
      this.$validator.reset();
    }
  }
}
</script>
